* {
    margin: 0;
    padding: 0;
}
#magnifier{
    width: 500px;
    // overflow: hidden;
}
.box {
    width: 450px;
    height: 600px;
    // border: 1px solid #333;
    display: flex;
    flex-direction: column;
    position: relative;
  }

  .box > .show {
    width: 100%;
    height: 450px;
    // border-bottom: 1px solid #333;
    position: relative;
    // cursor: none;
    z-index: 1000;
  }

  .show > .mask {
    width: 200px;
    height: 200px;
    background-color: yellow;
    opacity: 0.5;
    position: absolute;
    left: 100px;
    top: 100px;
    // border-radius: 50%;
    /* 该元素不作为事件目标 */
    pointer-events: none;
    z-index: 1000;
    display: none;
  }

  .list {
    flex: 1;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    padding: 20px;
    display: none;
  }

  .list > img {
    width: 54px;
    height: 54px;
    margin-right: 30px;
    // border: 1px solid #333;
    cursor: pointer;
  }

  .list > img.active {
    border-color: orange;
  }

  .enlarge {
    width: 800px;
    height: 800px;
    overflow: hidden;
    position: absolute;
    left: 101%;
    top: 0;
z-index: 1100;
border: black solid 2px;
    // border-radius: 50%;

    display: none;
  }

  .enlarge > img {
    width: 800px;
    height: 800px;
    position: absolute;
    left: 0;
    top: 0;
  }
  .show{
      img{
          width: 450px;
      }
  }
.good-area{
    overflow: hidden;
    .contaninter{
        #magnifier{
            float: left;
            width: 450px;
            height: 450px;
        }
        .good-info{
            float: left;
        }
        .good-shop{
            float: left;
        }

    }
}
.contaninter {
    .layui-breadcrumb {
        // visibility: hidden;
        font-size: 0;
    }

}